<template>
	<view>
		<view>
			<view class="head">
				<image class="img" src="../../../static/image/VCG21gic19970851@2x.png"></image>
				<view class="name">{{uname}}</view>
				<view class="shebei">在线设备：{{deviceLength}}个</view>
				<view class="imgs" @click="fanghui">
					<image src="../../../static/image/fanhui.png"></image>
				</view>
				<view class="imgss" @click="bianji" ><image src="../../../static/image/bianji.png"></image></view>
			</view>
			<view class="add">已添加的设备</view>
			<view class="list" v-for="(de,index) in device" :key="index" @click="details(de)">
				<view class="image">
					<image :src="de.iconUrl"></image>
				</view>
				<!-- <view class="text">{{de.name}}</view>-->
				<view class="text" v-if="de.isOnline==true">{{de.name}}</view>
				<view class="lixian_l" v-if="de.isOnline==false">
					<view>{{de.name}}</view>
					<view class="lixian">离线</view>
				</view>
				<!-- 				<view class="tiem">
					<view>...</view>
				</view> -->
			</view>
		</view>
		<!-- 	<view class="tianjia">
			<view>
				<image src="../../../static/image/jiahao.png"></image>
			</view>
			<view>
				<text>添加子设备</text>
			</view>
		</view> -->
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uname: "",
				devId: "",
				device: [],
				name: "",
				deviceLength: "0",
				homeId: ""
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.devId = option.devId;
			this.homeId = option.homeId;
			// console.log(option.devId)
			this.name = option.name;
			this.uname = option.uname
		},
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			// this.shebei();
			// this.title();
			this.zishebei();
		},
		methods: {
			// title() {
			// 	uni.setNavigationBarTitle({
			// 		title: ""
			// 	});
			// },
			fanghui() {
			uni.navigateTo({
				url: '/pages/smartHome/index'
			});
			},
			bianji(){
				uni.showLoading({
					title: '正在跳转到涂鸦官方设备详情界面'
				});
				try {
					const module = uni.requireNativePlugin("LJY-DeviceManageModule") //调用android中自定义的插件名称
					//跳转到涂鸦设备详情
					module.goPanelWithDeviceDetail({ //login表示自定义插件的函数名，第一个表示要传递的参数
						deviceId: this.devId,
						homeId: this.homeId
					});
					uni.hideLoading(); //加载结束
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
				}
				
			},
			onNavigationBarButtonTap(e) {
				// console.log(device.devId)
				uni.showLoading({
					title: '正在跳转到涂鸦官方设备详情界面'
				});
				try {
					const module = uni.requireNativePlugin("LJY-DeviceManageModule") //调用android中自定义的插件名称
					//跳转到涂鸦设备详情
					module.goPanelWithDeviceDetail({ //login表示自定义插件的函数名，第一个表示要传递的参数
						deviceId: this.devId
					});
					uni.hideLoading(); //加载结束
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
				}

			},
			zishebei() {
				try {
					uni.showLoading({
						title: '正在加载设备列表'
					});
					let deviceLengths = 0
					const deviceManageModule = uni.requireNativePlugin("LJY-DeviceManageModule"); //调用android中自定义的插件名称
					const ret = deviceManageModule.getSubDevList({ //login表示自定义插件的函数名，第一个表示要传递的参数
						deviceId: this.devId
					});
					uni.hideLoading(); //加载结束
					if (ret.code == 0) {
						// let device=JSON.parse(ret.data); 
						this.device = ret.data;
						for (let i = 0; i < this.device.length; i++) { //添加数组值
							if (this.device[i].isOnline == true) {
								deviceLengths++
							}
						}
						this.deviceLength=deviceLengths
					} else { //加载失败
						uni.showToast({
							title: ret.msg,
							duration: 2000
						});
					}
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '设备列表加载失败,请稍后再试',
						duration: 2000
					});
				}
			},
			details(device) {
				// console.log(device.devId)
				// console.log(this.homeId)
				uni.showLoading({
					title: '正在跳转到涂鸦官方设备详情界面'
				});
				try {
					const module = uni.requireNativePlugin("LJY-DeviceManageModule") //调用android中自定义的插件名称
					//跳转到涂鸦设备详情
					module.goPanelWithCheckAndTip({ //login表示自定义插件的函数名，第一个表示要传递的参数
						deviceId: device.devId,
						homeId: this.homeId
					});
					uni.hideLoading(); //加载结束
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
				}

			}
		}
	}
</script>

<style lang="less">
	// .beijing{
	// 	background-color: #f8f8f8;
	// }
	.head {
		.img {
			width: 100%;
		}

		.imgs {
			background-color: #007AFF;

			image {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 5%;
				margin-left: 20rpx;
			}
		}
		.imgss {
			background-color: #007AFF;
		
			image {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 5%;
				right: 4%;
				margin-left: 20rpx;
			}
		}
	}

	.name {
		width: 95%;
		position: absolute;
		font-size: 60rpx;
		color: #FFFFFF;
		top: 15%;
		margin-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.shebei {
		position: absolute;
		font-size: 30rpx;
		color: #FFFFFF;
		top: 22%;
		margin-left: 20rpx;
	}


	.tianjia {
		// background: #007AFF;
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #ebebeb;
		background-color: #FFFFFF;
		color: #555500;
		justify-content: center;
		position: fixed;
		// position: absolute;
		// position: relative;
		top: 90%;
		z-index: 99999;
		// float: inherit;

		view {
			font-size: 40rpx;

			image {
				width: 70rpx;
				height: 50rpx;
			}
		}
	}

	.add {
		margin-left: 20rpx;
		// color: #c4c5c8;
	}

	//列表
	.list {
		border-radius: 30rpx;
		// background-color: #007AFF;
		border-bottom: 3rpx solid #ebebeb;
		background-color: #FFFFFF;
		height: 160rpx;
		display: flex;
		width: 95%;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.list .image {
		height: 0rpx;
		// background-color: #007AFF;
		background-color: #fefefe;
		margin: 30rpx 30rpx 0rpx 30rpx;

		image {

			height: 100rpx;
			width: 100rpx;

		}
	}

	.list .text {
		line-height: 160rpx;
		font-size: 35rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.list .tiem {
		display: flex;
		margin-top: 30rpx;
		margin-right: 30rpx;
		line-height: 90rpx;
		margin-left: auto;

		height: 90rpx;
		width: 200rpx;

		image {
			margin-top: 25rpx;
			margin-left: 20rpx;
			height: 40rpx;
			width: 40rpx;
		}

	
		view {
			margin-left: auto;
			margin-right: 30rpx;
			// background-color: #333333;
			color: #bababa;
			font-size: 80rpx;


		}
	}
	
	.lixian_l {
		margin-top: 30rpx;
		font-size: 35rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	
		.lixian {
			width: 70rpx;
			margin-top: 10rpx;
			// height: 40rpx;
			border-radius: 10rpx;
			// margin-top: 60rpx;
			font-size: 30rpx;
			background-color: #52525c;
			color: #f2f1f4;
		}
	}
	
</style>
